<template>
  <div class="JGZKMB">
    <p style="color: #fdfdab; text-align: center; font-size: 24px">
      数据质量控制管理分析 <br />
      {{ time | time }}
    </p>
    <el-row>
      <el-col :span="8">
        <dv-border-box-1 style="height: 380px">
          <p class="_title">数据质量控制概况</p>
          <ul class="_a_ul">
            <li class="_a_li">
              质控成功数 <br />
              <span style="color: #f03200">{{ top1.质控成功数 }}</span>
              条
            </li>
            <li class="_a_li">
              质控失败数 <br />
              <span style="color: #f03200">{{ top1.质控失败数 }}</span> 条
            </li>
            <li class="_a_li" style="border: none">
              累计质控数 <br />
              <span style="color: #f03200">{{ top1.累计质控数 }}</span> 条
            </li>
          </ul>
          <div class="_a_div">
            <el-row style="margin-top: 30px">
              <el-col :span="5"
                ><dv-percent-pond
                  :config="config_a_a"
                  style="
                    width: 100px;
                    height: 60px;
                    margin-top: 40px;
                    margin-bottom: 5px;
                  "
                />
                <span style="color: #fdfdab">数据质控总评分</span>
              </el-col>
              <el-col :span="1"
                ><span
                  style="color: #fdfdab; font-size: 26px; line-height: 150px"
                  >》</span
                ></el-col
              >
              <el-col :span="16">
                <ul style="text-align: center">
                  <li class="_a_round_li">
                    <span style="color: #4ecedb">{{
                      Math.round(top1.一致性)
                    }}</span>
                    分 <br />一致性
                  </li>
                  <li class="_a_round_li">
                    <span style="color: #4ecedb">{{
                      Math.round(top1.完整性)
                    }}</span>
                    分 <br />完整性
                  </li>
                  <li class="_a_round_li">
                    <span style="color: #4ecedb">{{
                      Math.round(top1.规范性)
                    }}</span>
                    分 <br />规范性
                  </li>
                  <li class="_a_round_li">
                    <span style="color: #4ecedb">{{
                      Math.round(top1.时效性)
                    }}</span>
                    分 <br />时效性
                  </li>
                  <li class="_a_round_li">
                    <span style="color: #4ecedb">{{
                      Math.round(top1.连续性)
                    }}</span>
                    分 <br />连续性
                  </li>
                  <li class="_a_round_li">
                    <span style="color: #4ecedb">{{
                      Math.round(top1.上传率)
                    }}</span>
                    分 <br />上传率
                  </li>
                </ul>
              </el-col>
            </el-row>
          </div>
          <!-- <div
            id="main1"
            :style="{
              width: '550px',
              height: '170px',
              marginTop: '-50px',
            }"
          ></div> -->
        </dv-border-box-1>
      </el-col>
      <el-col :span="8">
        <dv-border-box-1 style="height: 380px">
          <ul class="_b_ul">
            <li class="_b_li">
              当日质控数 <br />
              <span style="color: #f03200">{{ top2.当日质控数 }}</span> 条
            </li>
            <li class="_b_li">
              当日成功数 <br />
              <span style="color: #f03200">{{ top2.当日成功数 }}</span> 条
            </li>
            <li class="_b_li" style="border: none">
              当日通过率 <br />
              <span style="color: #f03200">{{
                Math.round(top2.当日通过率 * 100)
              }}</span>
              %
            </li>
          </ul>
          <div
            id="main2"
            :style="{
              width: '550px',
              height: '300px',
              marginLeft: '10px',
            }"
          ></div>
        </dv-border-box-1>
      </el-col>
      <el-col :span="8">
        <dv-border-box-1 style="height: 380px">
          <ul class="_b_ul">
            <li class="_b_li">
              <span style="color: #ddd166">{{ top3.当前质控表数 }}</span> /
              {{ top3.质控表数 }}
              <br />
              当前质控表数
            </li>
            <li class="_b_li">
              <span style="color: #ddd166">{{ top3.当前质控字段数 }}</span> /
              {{ top3.质控字段数 }}
              <br />
              当前质控字段数
            </li>
            <li class="_b_li" style="border: none">
              <span style="color: #ddd166">{{ Math.round(top1.总评分) }}</span
              >分
              <br />
              质控分数
            </li>
          </ul>
          <div
            id="main3"
            :style="{
              width: '550px',
              height: '300px',
              marginLeft: '10px',
            }"
          ></div>
        </dv-border-box-1>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="8">
        <dv-border-box-1 style="height: 340px">
          <p class="_title">质控规则情况</p>
          <div
            id="main4"
            :style="{
              width: '550px',
              height: '270px',
              marginLeft: '10px',
            }"
          ></div>
        </dv-border-box-1>
      </el-col>
      <el-col :span="8">
        <dv-border-box-1 style="height: 340px">
          <p class="_title">质控错误校验情况</p>
          <dv-scroll-board
            :config="config_b_a"
            style="width: 530px; height: 260px; margin-left: 20px"
          />
        </dv-border-box-1>
      </el-col>
      <el-col :span="8">
        <dv-border-box-1 style="height: 340px">
          <p class="_title">质控表问题排行 Top10</p>
          <dv-capsule-chart
            :config="config_c_a"
            style="width: 530px; height: 260px; margin-left: 20px"
          />
        </dv-border-box-1>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: new Date(),
      config_a_a: {
        value: 77,
        formatter: "{value}分",
      },
      config_b_a: {
        header: ["报错表", "错误字段", "报错性描述", "时间"],
        data: [],
        columnWidth: [120, 120, 150, 160],
        oddRowBGC: "rgba(255,255,255,0.1)",
        evenRowBGC: "rgba(255,255,255,0.2)",
      },
      config_c_a: {
        data: [
          {
            name: "南阳",
            value: 167,
          },
          {
            name: "周口",
            value: 123,
          },
          {
            name: "漯河",
            value: 98,
          },
          {
            name: "郑州",
            value: 75,
          },
          {
            name: "西峡",
            value: 66,
          },
          {
            name: "西峡",
            value: 66,
          },
          {
            name: "西峡",
            value: 66,
          },
          {
            name: "西峡",
            value: 66,
          },
          {
            name: "西峡",
            value: 66,
          },
          {
            name: "西峡",
            value: 66,
          },
          {
            name: "西峡",
            value: 66,
          },
          {
            name: "西峡",
            value: 66,
          },
          {
            name: "西峡",
            value: 66,
          },
        ],
        colors: ["#e062ae", "#fb7293", "#e690d1", "#32c5e9", "#96bfff"],
        unit: "单位",
        showValue: true,
      },
      top1: {},
      top2: {},
      top3: {},
      bottom1: {},
    };
  },
  watch: {},
  mounted() {
    this.getNowTime();
    this.drawLine2();
    this.drawLine3();
    this.drawLine4();
    this.getData();
  },
  methods: {
    getNowTime() {
      this.time = new Date();
      setTimeout(() => {
        this.getNowTime();
      }, 1000);
    },
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main1"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["质控数量"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "2022-11-15",
              "2022-11-17",
              "2022-11-19",
              "2022-11-21",
              "2022-11-23",
              "2022-11-25",
              "2022-11-27",
            ],
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "",
            type: "line",
            stack: "1",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
            smooth: true,
          },
        ],
      });
    },
    drawLine2() {
      // 数据结构
      let 成功数 = [];
      let 成功率 = [];
      let 失败数 = [];
      let 失败率 = [];
      let 时间 = [];
      for (var i in this.top2.图) {
        成功数.push(this.top2.图[i].correct);
        成功率.push(Math.round(this.top2.图[i].correctPercent * 100));
        失败数.push(this.top2.图[i].error);
        失败率.push(Math.round(this.top2.图[i].errorPercent * 100));
        时间.push(this.top2.图[i].date);
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main2"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["成功数", "失败数", "成功率", "失败率"],
          textStyle: {
            //改变xy轴上文字的颜色
            color: "#FFF",
          },
        },
        xAxis: [
          {
            type: "category",
            data: 时间,
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.5)",
              },
            },
            axisLabel: {
              textStyle: {
                //改变xy轴上文字的颜色
                color: "#FFF",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "成功/失败数",
            axisLabel: {
              formatter: "{value} 人",
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.5)",
              },
            },
            axisLabel: {
              textStyle: {
                //改变xy轴上文字的颜色
                color: "#FFF",
              },
            },
          },
          {
            type: "value",
            name: "成功/失败率",
            axisLabel: {
              formatter: "{value} %",
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.5)",
              },
            },
            axisLabel: {
              textStyle: {
                //改变xy轴上文字的颜色
                color: "#FFF",
              },
            },
          },
        ],
        series: [
          {
            name: "成功数",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " ml";
              },
            },
            data: 成功数,
          },
          {
            name: "失败数",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " ml";
              },
            },
            data: 失败数,
          },
          {
            name: "成功率",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " °C";
              },
            },
            data: 成功率,
          },
          {
            name: "失败率",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " °C";
              },
            },
            data: 失败率,
          },
        ],
      });
    },
    drawLine3() {
      let 问题数 = [];
      let 处理率 = [];
      let 时间 = [];
      for (var i in this.top3.图) {
        问题数.push(this.top3.图[i].error);
        处理率.push(Math.round(this.top3.图[i].percent * 100));
        时间.push(this.top3.图[i].date);
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main3"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["问题数", "数据处理率"],
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            data: 时间,
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.5)",
              },
            },
            axisLabel: {
              textStyle: {
                //改变xy轴上文字的颜色
                color: "#FFF",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "失败数",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} 人",
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.5)",
              },
            },
            axisLabel: {
              textStyle: {
                //改变xy轴上文字的颜色
                color: "#FFF",
              },
            },
          },
          {
            type: "value",
            name: "数据处理率",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} %",
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.5)",
              },
            },
            axisLabel: {
              textStyle: {
                //改变xy轴上文字的颜色
                color: "#FFF",
              },
            },
          },
        ],
        series: [
          {
            name: "问题数",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " ml";
              },
            },
            data: 问题数,
          },
          {
            name: "数据处理率",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " °C";
              },
            },
            data: 处理率,
          },
        ],
      });
    },
    drawLine4() {
      // 数据结构
      let 完整性 = [];
      let 一致性 = [];
      let 规范性 = [];
      let 时效性 = [];
      let 连续性 = [];
      let 上传率 = [];
      let 时间 = [];
      for (var i in this.bottom1) {
        完整性.push(Math.round(this.bottom1[i].完整性));
        一致性.push(Math.round(this.bottom1[i].一致性));
        规范性.push(Math.round(this.bottom1[i].规范性));
        时效性.push(Math.round(this.bottom1[i].时效性));
        连续性.push(Math.round(this.bottom1[i].连续性));
        上传率.push(Math.round(this.bottom1[i].上传率));
        时间.push(this.bottom1[i].date);
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main4"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["完整性", "一致性", "规范性", "时效性", "连续性", "上传率"],
          textStyle: {
            color: "#fff",
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "2022-11-15",
              "2022-11-17",
              "2022-11-19",
              "2022-11-21",
              "2022-11-23",
              "2022-11-25",
              "2022-11-27",
            ],
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "完整性",
            type: "line",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: 完整性,
            smooth: true,
          },
          {
            name: "一致性",
            type: "line",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: 一致性,
            smooth: true,
          },
          {
            name: "规范性",
            type: "line",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: 规范性,
            smooth: true,
          },
          {
            name: "时效性",
            type: "line",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: 时效性,
            smooth: true,
          },
          {
            name: "连续性",
            type: "line",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: 连续性,
            smooth: true,
          },
          {
            name: "上传率",
            type: "line",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: 上传率,
            smooth: true,
          },
        ],
      });
    },
    getData() {
      // top 1
      this.$get(baseUrl.qmjkzkIp + "/T1/api/v1/Platform/BI/BI0").then((res) => {
        this.top1 = res.data;
        this.config_a_a.value = Math.round(res.data.总评分);
        this.config_a_a = { ...this.config_a_a };
      });
      // top 2
      this.$get(baseUrl.qmjkzkIp + "/T1/api/v1/Platform/BI/BI1").then((res) => {
        this.top2 = res.data;
        this.drawLine2();
      });
      // top 3
      this.$get(baseUrl.qmjkzkIp + "/T1/api/v1/Platform/BI/BI2").then((res) => {
        this.top3 = res.data;
        this.drawLine3();
      });
      // bottom 1
      this.$get(baseUrl.qmjkzkIp + "/T1/api/v1/Platform/BI/BI3").then((res) => {
        this.bottom1 = res.data;
        this.drawLine4();
      });
      // bottom 2
      this.$get(baseUrl.qmjkzkIp + "/T1/api/v1/Platform/BI/BI4").then((res) => {
        var newList = [];
        for (var i in res.data) {
          newList.push([
            res.data[i].tableDescription,
            res.data[i].fieldDescription,
            res.data[i].msg,
            res.data[i].createdTime,
          ]);
        }
        this.config_b_a.data = newList;
        this.config_b_a = { ...this.config_b_a };
      });
      // bottom 3
      this.$get(baseUrl.qmjkzkIp + "/T1/api/v1/Platform/BI/BI5").then((res) => {
        var newList = [];
        for (var i in res.data) {
          newList.push({
            name: res.data[i].tableName,
            value: res.data[i].count,
          });
        }
        this.config_c_a.data = newList;
        this.config_c_a = { ...this.config_c_a };
      });
    },
  },
  filters: {
    time(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
          d.getFullYear() +
          "年" +
          month +
          "月" +
          day +
          "日 " +
          hours +
          ":" +
          min +
          ":" +
          sec;
        return times;
      }
    },
    numFormat(num) {
      var c =
        num.toString().indexOf(".") !== -1
          ? num.toLocaleString()
          : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");

      return c;
    },
  },
};
</script>

<style scoped>
.JGZKMB {
  background-color: #04133d;
  height: 100vh;
}
._title {
  padding: 20px;
  color: #fdfdab;
  font-size: 18px;
  margin: 0;
  margin-bottom: 0;
  font-weight: 700;
}
._a_ul {
  padding: 20px;
  color: #ffffe6;
  font-size: 16px;
  margin: 0;
  padding-top: 0;
}
._a_li {
  display: inline-block;
  width: 33.3%;
  border-right: 1px solid #ffffe6;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 5px 0;
}
._a_div {
  padding: 20px;
  padding-top: 0;
}
._a_round_li {
  display: inline-block;
  width: 83px;
  border: 3px solid #ffffe6;
  border-radius: 50%;
  color: #ffffe6;
  text-align: center;
  padding: 17px;
  background-color: rgba(255, 255, 255, 0.1);
  margin-right: 3px;
}
._b_ul {
  padding: 20px;
  color: #ffffe6;
  font-size: 16px;
  margin: 0;
}
._b_li {
  display: inline-block;
  width: 33.3%;
  border-right: 1px solid #ffffe6;
  text-align: center;
  padding: 5px 0;
}
</style>
